<template>
	<view class="register-container">
		<view class="u-m-b-30" v-if="registerType === 0">
			<u-icon name="info-circle" color="#ff551a" size="30" class="u-m-r-10"> </u-icon>
			<text style="color:#ff551a;font-size: 28rpx;" >
				本应用内容涉及酒类相关信息，请确认您已满18周岁并确认提交信息真实有效。请您切勿向未成年人分享此账号内容，禁止上传不理性饮酒未成年人内容、违反社会公序良俗及侵权内容，平台保留删除此类内容的权利。
			</text>
		</view>
		<view class="u-p-20 u-flex u-row-between u-m-b-30" style="border-radius: 10rpx;background-color: #f6f6f6;" v-if="userFrom.IdType!==0">
			<view class="u-flex-1 u-font-30 u-line-1" style="color: #666;">
				已选:{{authText[userFrom.IdType-1]}}
			</view>
			<view class="u-flex" @click="userFrom.IdType = 0">
				<text class="u-m-r-10 u-font-30" style="color: #666;"> 重新选择</text>
				<u-icon name="arrow-right" size="30" color="#666"></u-icon>
			</view>
		</view>
		<view class="u-font-36" style="font-weight: 500;">
			{{titleShow()}}
		</view>
		<!-- 切换tabbar 自动识别或手动输入 -->
		<view class="register-header u-flex u-row-between" v-if="(registerType === 0&&userFrom.IdType === 1)||registerType === 1">
			<view :class="['u-flex','header-item', 'u-m-r-42', 'u-row-center', {'header-item-active':tabbarIndex===0}]" @click="tabbarChange(0)">
				<u-icon name="camera" size="38" :color="tabbarIndex ===0?'#ff551a':'#666'"></u-icon>
				<text class="u-font-32 u-m-l-20" :style="{'color':tabbarIndex === 0?'#ff551a':'#666'}">自动识别</text>
				<view class="mark-yes" v-show="tabbarIndex===0">
					<u-icon name="checkmark" color="#fff"></u-icon>
				</view>
			</view>
			<view :class="['u-flex','header-item', 'u-row-center', {'header-item-active':tabbarIndex===1}]" @click="tabbarChange(1)">
				<u-icon name="edit-pen" size="38" :color="tabbarIndex === 1?'#ff551a':'#666'"></u-icon>
				<text class="u-font-32 u-m-l-20" :style="{'color':tabbarIndex === 1?'#ff551a':'#666'}">手动填写</text>
				<view class="mark-yes" v-show="tabbarIndex===1">
					<u-icon name="checkmark" color="#fff"></u-icon>
				</view>
			</view>
		</view>
		<!-- 实名认证部分 -->
		<view v-if="registerType === 0">
			<view class="auth-type-list" v-if="userFrom.IdType === 0">
				<view class="auth-type-item u-flex u-row-between" @click="userFrom.IdType = 1">
					<view class="u-flex u-flex-1">
						<image src="/static/common/authIC.png" class="auth-type-image"></image>
						<text class="u-line-1 u-flex-1 u-font-30">身份证（自动认证）</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="auth-type-item u-flex u-row-between" @click="userFrom.IdType = 2">
					<view class="u-flex u-flex-1">
						<image src="/static/common/authHK.png" class="auth-type-image"></image>
						<text class="u-line-1 u-flex-1 u-font-30">港澳台居民居住证（人工认证）</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="auth-type-item u-flex u-row-between" @click="userFrom.IdType = 3">
					<view class="u-flex u-flex-1">
						<image src="/static/common/authWGR.png" class="auth-type-image"></image>
						<text class="u-line-1 u-flex-1 u-font-30">外国人永久居留身份证（人工认证）</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="auth-type-item u-flex u-row-between" @click="userFrom.IdType = 4">
					<view class="u-flex u-flex-1">
						<image src="/static/common/authHZ.png" class="auth-type-image"></image>
						<text class="u-line-1 u-flex-1 u-font-30">护照（人工认证）</text>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-else-if="userFrom.IdType === 1">
				<u-upload
					:action="baseUrl + 'api/Resource/Upload'"
					:file-list="idCardImage"
					:header="header"
					:max-count="1"
					name="image"
					class="upload-input"
					:deletable="true"
					:show-progress="false"
					:custom-btn="true"
					:full-parent-width="true"
					v-if="tabbarIndex === 0"
					@on-success="onFrontSuccess"
					@on-remove="onFrontRemove"
				>
					<template #addBtn>
						<view  class="upload-area u-flex u-row-center" style="flex-direction: column;">
							<u-icon name="camera" color="#666" size="46"></u-icon>
							<view class="u-font-26 u-text-center"  style="color: #666;width: 100%;">上传身份证正面照片</view>
						</view>	
					</template>
					
				</u-upload>
				<u-form class="container" v-if="tabbarIndex === 0&&idCardIdentify" :model="userFrom" :error-type="['toast']">
					<u-form-item label-position="top" label="姓名"  :label-style="greyLabelStyle" prop="realname">
						<u-input class="identify-input" v-model="userFrom.realname" placeholder="请输入姓名" style="color: #ccc;" :disabled="true" />
					</u-form-item>
					<u-form-item label-position="top" label="身份证号"  :label-style="greyLabelStyle" prop="idCardNo">
						<u-input  class="identify-input" v-model="userFrom.idCardNo" placeholder="请输入身份证号" style="color: #ccc;" :disabled="true" />
					</u-form-item>
				</u-form>
				<u-form class="container" v-show="tabbarIndex === 1"  :model="userFrom" ref="profileForm" :error-type="['toast']">
					<u-form-item label-position="top" label="姓名" required :label-style="labelStyle" prop="realname">
						<u-input v-model="userFrom.realname" placeholder="请输入姓名" :disabled="false" />
					</u-form-item>
					<u-form-item label-position="top" label="身份证号" required :label-style="labelStyle" prop="idCardNo">
						<u-input v-model="userFrom.idCardNo" placeholder="请输入身份证号" :disabled="false" />
					</u-form-item>
				</u-form>
				<view class="u-m-t-50">
					<image src="/static/common/doushou.png" style="height: 250rpx;width: 100%;"></image>
				</view>
			</view>
			<view v-else>
				<u-form class="container" :model="userFrom" ref="profileForm" :error-type="['toast']">
					<u-form-item label-position="top" label="姓名" required :label-style="labelStyle" prop="realname">
						<u-input v-model="userFrom.realname" placeholder="请输入姓名" :disabled="false" />
					</u-form-item>
					<u-form-item label-position="top" label="证件号" required :label-style="labelStyle" prop="idCardNo">
						<u-input v-model="userFrom.idCardNo" placeholder="请输入身份证号" :disabled="false" />
					</u-form-item>
				</u-form>
				<u-upload
					:action="baseUrl + 'api/Resource/Upload'"
					:file-list="otherFaceImage"
					:header="header"
					:max-count="1"
					name="image"
					class="upload-input u-m-b-20 u-m-t-20"
					:deletable="true"
					:show-progress="false"
					:custom-btn="true"
					:full-parent-width="true"
					@on-success="otherFaceSuccess"
					@on-remove="otherFaceRemove"
				>
					<view slot="addBtn"  class="upload-area u-flex u-row-center" style="flex-direction: column;">
						<u-icon name="camera" color="#666" size="46"></u-icon>
						<view class="u-font-26 u-text-center"  style="color: #666;width: 100%;">上传证件照1</view>
					</view>
				</u-upload>
				<u-upload
					:action="baseUrl + 'api/Resource/Upload'"
					:file-list="otherBackImage"
					:header="header"
					:max-count="1"
					name="image"
					class="upload-input"
					:deletable="true"
					:show-progress="false"
					:custom-btn="true"
					:full-parent-width="true"
					@on-success="otherBackSuccess"
					@on-remove="otherBackRemove"
				>
					<view slot="addBtn"  class="upload-area u-flex u-row-center" style="flex-direction: column;">
						<u-icon name="camera" color="#666" size="46"></u-icon>
						<view class="u-font-26 u-text-center"  style="color: #666;width: 100%;">上传证件照2</view>
					</view>
				</u-upload>
				
			</view>
		</view>
		<!-- 企业注册部分 -->
		<view v-if="registerType === 1">
			<u-upload
				:action="baseUrl + 'api/Resource/Upload'"
				:file-list="bussnessImage"
				:header="header"
				:max-count="1"
				name="image"
				class="upload-input"
				:deletable="true"
				:show-progress="false"
				:custom-btn="true"
				fullParentWidth
				v-if="tabbarIndex === 0"
				@on-success="onBussnessSuccess"
				@on-remove="onBusinessRemove"
			>
				<!-- <view slot="addBtn"  class="upload-area u-flex u-row-center" style="flex-direction: column;">
					<u-icon name="camera" color="#666" size="46"></u-icon>
					<view class="u-font-26 u-text-center"  style="color: #666;width: 100%;">上传营业执照</view>
				</view> -->
				<template #addBtn>
					<view slot="addBtn"  class="upload-area u-flex u-row-center" style="flex-direction: column;">
						<u-icon name="camera" color="#666" size="46"></u-icon>
						<view class="u-font-26 u-text-center"  style="color: #666;width: 100%;">上传营业执照</view>
					</view>	
				</template>
			</u-upload>
			<u-form class="container" v-if="tabbarIndex === 0&&idBusinessIdentify" :model="businessForm" :error-type="['toast']">
				<u-form-item label-position="top" label="企业名称" required :label-style="greyLabelStyle" prop="name">
					<u-input class="identify-input"  v-model="businessForm.name" placeholder="请输入企业名称" :disabled="true" />
				</u-form-item>
				<u-form-item label-position="top" label="统一社会信用代码" required :label-style="greyLabelStyle" prop="unifiedSocialCreditCode">
					<u-input class="identify-input"  v-model="businessForm.unifiedSocialCreditCode" placeholder="请输入企业编号" :disabled="true" />
				</u-form-item>
				<u-form-item label-position="top" label="法定代表人姓名" required :label-style="greyLabelStyle" prop="legalPersonName">
					<u-input class="identify-input"  v-model="businessForm.legalPersonName" placeholder="请输入法人姓名" :disabled="true" />
				</u-form-item>
				<view class="u-font-36 u-m-t-30" style="font-weight: 500;">
					区域信息
				</view>
				<u-form-item label-position="top" label="企业经营区域" required :label-style="labelStyle" prop="regionId" right-icon="forward">
						<u-input type="select" :select-open="pickerShow" v-model="region" placeholder="省/市/区（县）"
							@click="pickerShow = true" />
				</u-form-item>
			</u-form>
			<u-form class="container" v-show="tabbarIndex === 1"  :model="businessForm" ref="businessForm" :error-type="['toast']">
				<u-form-item label-position="top" label="企业名称" required :label-style="labelStyle" prop="name">
					<u-input v-model="businessForm.name" placeholder="请输入企业名称" :disabled="false" />
				</u-form-item>
				<u-form-item label-position="top" label="统一社会信用代码" required :label-style="labelStyle" prop="unifiedSocialCreditCode">
					<u-input v-model="businessForm.unifiedSocialCreditCode" placeholder="请输入企业编号" :disabled="false" />
				</u-form-item>
				<u-form-item label-position="top" label="法定代表人姓名" required :label-style="labelStyle" prop="legalPersonName">
					<u-input v-model="businessForm.legalPersonName" placeholder="请输入法人姓名" :disabled="false" />
				</u-form-item>
				<view class="u-font-36 u-m-t-30"  style="font-weight: 500;">
					区域信息
				</view>
				<u-form-item label-position="top" label="企业经营区域" required :label-style="labelStyle" prop="regionId" right-icon="forward">
						<u-input type="select" :select-open="pickerShow" v-model="region" placeholder="省/市/区（县）"
							@click="pickerShow = true" />
				</u-form-item>
				
			</u-form>
			<u-picker mode="region" v-model="pickerShow" :confirm-color="themeColor" :default-region="defaultRegion" :area-code="defaultArea" @confirm="regionConfirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default{
		data(){
			return {
				authText:['身份证','港澳台居民居住证','外国人永久居留身份证','护照'],
				tabbarIndex:0,
				
				idCardImage: [],
				idCardImageId:'',
				otherFaceImage:[],
				otherFaceImageId:'',
				otherBackImage:[],
				otherBackImageId:'',
				bussnessImage:[],
				bussnessImageId:'',
				idCardIdentify:false,
				idBusinessIdentify:false,
				pickerShow:false,
				defaultArea:[],
				defaultRegion:[],
				userFrom:{
					id: '',
					realname: '',
					idCardNo: '',
					IdType:0
				},
				region: '',
				userRules: {
					realname: [
						{ required: true, message: '姓名不得为空', trigger: 'blur' }
					],
					idCardNo: [
						{ required: true, message: '身份证号不得为空', trigger: 'blur' },
						{
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
							message: '请输入正确的身份证号',
							trigger: 'blur'
						}
					],
				},
				businessForm: {
					name: '',
					unifiedSocialCreditCode: '',
					regionId: 0,
					managerId:'',
					legalPersonName: '',
				},
				businessRules:{
					name: [{
						required: true,
						message: '店铺名称不能为空',
						trigger: 'blur'
					}],
					unifiedSocialCreditCode: [{
						required: true,
						message: '营业执照编号不能为空',
						trigger: 'blur'
					}],
					legalPersonName: [{
						required: true,
						message: '法人不能为空',
						trigger: 'blur'
					}],
					regionId: [{
						required: true,
						message: '省市区必须选择',
						trigger: 'blur'
					}],
				},
				labelStyle: {
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
				greyLabelStyle:{
					fontSize: '30rpx',
					fontWeight: 'bold',
					color:"#999"
				}
			}
		},
		props:{
			registerType:{
				type:Number,
				default:0
			}
		},
		computed:{
			...mapState(useUserStore, {
				storeUser:'user',
				header(state){
					return {
						Authorization: 'Bearer ' + state.user.access_token,
					}
				}
			})
		},
		created() {
			this.userFrom.id =this.storeUser.id;
			this.businessForm.managerId = this.storeUser.id;
		},
		methods:{
			// 证件照1上传成功
			otherFaceSuccess(data){
				if(data.code === 200){
					this.userFrom.faceResourceId = data.data[0].id;
				}else{
					return false;
				}
			},
			// 证件照2上传成功
			otherBackSuccess(data){
				if(data.code === 200){
					this.userFrom.backResourceId = data.data[0].id;
				}else{
					return false;
				}
			},
			// 证件照1删除成功
			otherFaceRemove(){
				this.userFrom.faceResourceId = '';
			},
			// 证件照2删除成功
			otherBackRemove(){
				this.userFrom.backResourceId = '';
			},
			// 标题枚举
			titleShow(){
				if(this.registerType === 0&&this.userFrom.IdType === 0){
					return '选择证件类型';
				}
				if(this.registerType === 0&&this.userFrom.IdType !== 0){
					return '个人信息';
				}
				if(this.registerType === 1){
					return '营业执照信息';
				}
			},
			async validateShop(){
			return	this.$refs.businessForm.validate();
			},
			// 选择地区回调
			regionConfirm(e) {
				console.log(e);
				this.region = e.province.name + '-' + e.city.name + '-' + e.area.name;
				this.businessForm.regionId = e.area.code;
				this.businessForm.cityId = e.city.code;
				this.businessForm.provinceId = e.province.code;
			},
			tabbarChange(val){
				this.tabbarIndex = val;
				if(this.registerType == 0){
					if(val === 0){
						this.userFrom.realname = '';
						this.userFrom.idCardNo = '';
					}else{
						this.$refs.profileForm.setRules(this.userRules);
					}
					this.idCardIdentify = false;
				}else{
					if(val === 0&&this.bussnessImageId!=''){
						this.businessForm.name = '';
						this.businessForm.unifiedSocialCreditCode = '';
						this.businessForm.legalPersonName = '';
					}else{
						this.$refs.businessForm.setRules(this.businessRules);
					}
					this.idBusinessIdentify = false;
				}
			},
			// 营业执照信息自动识别
			async onBussnessSuccess(data){
				if(data.code === 200){
					this.bussnessImageId = data.data[0].id;
					uni.showLoading({
						title:'正在识别...'
					})
				}else{
					return false;
				}
				let params = {
					resourceId: data.data[0].id
				};
				const res = await this.$newHttp.get('api/ThirdParty/ali/recognizeBusinessLicense',{params:params});
				uni.hideLoading();
				if(res.code === 200){
					this.idBusinessIdentify = true;
					this.businessForm.name = res.data.name;
					this.businessForm.unifiedSocialCreditCode = res.data.registerNumber;
					this.businessForm.legalPersonName = res.data.legalPerson;
				}else{
					this.idBusinessIdentify = false;
					this.$u.toast('识别失败，请重新上传或手动输入营业执照信息');
				}
			},
			// 身份证正面信息自动识别
			async onFrontSuccess(data) {
				if(data.code === 200){
					this.idCardImageId = data.data[0].id;
					uni.showLoading({
						title:'正在识别...'
					})
				}else{
					return false;
				}
				const res  = await this.$newHttp.get('api/ThirdParty/ali/recognizeIdentity', { params: { side: 'face', resourceId: data.data[0].id } });
				uni.hideLoading();
				if(res.code === 200&&res.data.frontResult){
					let frontResult = res.data.frontResult;
					this.idCardIdentify = true;
					this.userFrom.realname = frontResult.name;
					this.userFrom.idCardNo = frontResult.idNumber;
				}else{
					this.idCardIdentify = false;
					this.$u.toast('识别失败，请重新上传或手动输入身份证信息');
				}
			},
			onFrontRemove(){
				this.userFrom.realname = '';
				this.userFrom.idCardNo = '';
				this.idCardIdentify = false;
				this.idCardImageId='';
			},
			onBusinessRemove(){
				this.bussnessImageId='';
				this.businessForm.name = '';
				this.businessForm.unifiedSocialCreditCode = '';
				this.businessForm.legalPersonName = '';
				this.idBusinessIdentify = false;
			},
			async validateUser(){
				 return await this.$refs.profileForm.validate();
			 // console.log(this.$refs.profileForm.validate());	
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff !important;
	}
	.register-container{
		overflow: hidden;
		.auth-type-list{
			padding: 30rpx 0;
			.auth-type-item{
				background-color: #f6f6f6;
				border-radius: 12rpx;
				padding: 25rpx 30rpx;
				margin-bottom: 20rpx;
				.auth-type-image{
					width: 68rpx;
					height: 68rpx;
					margin-right: 10rpx;
				}
			}
		}
		.register-header{
			margin: 28rpx 0;
			.header-item{
				flex:1;
				box-sizing: border-box;
				padding: 30rpx 0;
				border: 2rpx solid #CCCCCC;
				border-radius: 8rpx;
				color: #666;
			}
			.header-item-active{
				border: 2rpx solid #FF551A;
				background-color: #FFEEE8;
				position: relative;
				color: #FF551A;
				.mark-yes{
					display: block;
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					text-align: center;
					background-color: #ff551a;
					bottom: 0;
					right: 0;
					border-radius: 5rpx;
					border-bottom-right-radius: 9rpx;
				}
				
			}
		}
		.upload-input{
			::v-deep .u-list-item{
				width: 100% !important;
				height: 264rpx !important;
				.u-preview-image{
					>div{
						background-size: 100% 100% !important; 
					}
				}
			}
			.upload-area{
				width: 100%;
				height: 264rpx;
				border-radius: 10rpx;
				background-color: #f6f6f6;
			}
		}
		.identify-input{
			::v-deep .u-input__input{
				color: #999;
			}
		}
	}
</style>